<template>
	<view class="mine-store-manage">
		<view class="fill-base pl-lg pb-sm flex-between b-1px-b">
			<view class="flex-y-center">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text">店铺头像</view>
			</view>
			<view class="flex-1 flex-between mr-lg">
				<upload @upload="imgUpload" :imagelist="subForm.cover" imgtype="cover" text="添加封面" :imgsize="1"
					imgclass="sm">
				</upload>
				<view></view>
			</view>
		</view>
		<view class="fill-base pd-lg flex-between b-1px-b">
			<view class="flex-y-center">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text">店铺名称</view>
			</view>
			<input v-model="subForm.title" type="text" class="item-input flex-1" maxlength="20" placeholder-class="c-placeholder"
				:placeholder="rule[1].errorMsg" />
		</view>
		<view class="fill-base pd-lg flex-between b-1px-b">
			<view class="flex-y-center">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text">店铺地址</view>
			</view>
			<view class="item-input flex-1">
				<view @tap.stop="toChooseLocation" class="flex-y-center">
					<view class="flex-1" :class="[{'c-placeholder':!subForm.address},{'c-title':subForm.address}]">
						{{subForm.address || `点击右边图标设置`}}
					</view><i class="iconfont icon-dingwei ml-sm" :style="{color:primaryColor}"></i>
				</view>
			</view>
		</view>
		<view class="fill-base pd-lg">
			<view class="flex-y-center">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text">店铺描述</view>
			</view>
			<textarea v-model="subForm.desc" type="text" class="item-textarea mt-md flex-1" maxlength="200"
				placeholder-class="c-placeholder" :placeholder="rule[3].errorMsg"></textarea>
		</view>
		<view class="fill-base mt-md pd-lg flex-between b-1px-b">
			<view class="flex-y-center">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text">姓名</view>
			</view>
			<input v-model="subForm.user_name" type="text" class="item-input flex-1" placeholder-class="c-placeholder"
				:placeholder="rule[4].errorMsg" />
		</view>
		<view class="fill-base mt-md pd-lg flex-between b-1px-b">
			<view class="flex-y-center">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text">联系电话</view>
			</view>
			<input v-model="subForm.mobile" type="number" class="item-input flex-1" placeholder-class="c-placeholder"
				:placeholder="rule[5].errorMsg" />
		</view>
		<!-- <view class="fill-base pd-lg flex-between b-1px-b">
			<view class="flex-y-center">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text">开店时间</view>
			</view>
			<view class="flex-y-center f-paragraph c-title flex-1">
				<view @tap.stop="toShowTime('start_time')" :style="{color:subForm.start_time ? primaryColor : '#999'}">
					{{subForm.start_time || '选择开始时间'}}
				</view>
				<view class="ml-md mr-md">至</view>
				<view @tap.stop="toShowTime('end_time')" :style="{color:subForm.end_time ? primaryColor : '#999'}">
					{{subForm.end_time || '选择结束时间'}}
				</view>
			</view>
		</view> -->
		<view class="fill-base pd-lg flex-between">
			<view class="flex-y-center">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text">是否营业</view>
			</view>
			<view class="flex-1 flex-between">
				<view class="f-desc">{{workType[subForm.business_status]}}</view>
				<view @tap.stop="toChangeItem('business_status')">
					<i class="iconfont icon-switch c-caption ml-sm"
						:class="[{'icon-switch-on':subForm.business_status==1}]"
						:style="{ color: subForm.business_status==1 ? primaryColor : ''}"></i>
				</view>
			</view>
		</view>
		<view class="space-max-footer"></view>
		<w-picker :visible.sync="showTime" mode="time" :value="toDayTime" :current="false" :second="false"
			:themeColor="primaryColor" @confirm="onConfirm" ref="time"></w-picker>

		<fix-bottom-button @confirm="submit" :text="[{text:'保存',type:'confirm'}]" bgColor="#fff"></fix-bottom-button>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				toDay: '',
				toDayTime: '',
				showKey: '',
				showTime: false,
				workType: {
					0: '休息',
					1: '营业',
				},
				subForm: {
					id: 0,
					cover: [],
					title: '',
					address: '',
					lat: '',
					lng: '',
					desc: '',
					user_name: '',
					mobile: '',
					start_time: '',
					end_time: '',
					business_status: 0,
				},
				rule: [{
					name: "cover",
					checkType: "isNotNull",
					errorMsg: "请上传店铺头像"
				}, {
					name: "title",
					checkType: "isNotNull",
					errorMsg: "请输入店铺名称",
					regType: 2
				}, {
					name: "address",
					checkType: "isNotNull",
					errorMsg: "请设置店铺地址"
				}, {
					name: "desc",
					checkType: "isNotNull",
					errorMsg: "请输入店铺描述",
					regType: 2
				}, {
					name: "user_name",
					checkType: "isNotNull",
					errorMsg: "请输入您的姓名",
					regType: 2
				}, {
					name: "mobile",
					checkType: "isAllPhone",
					errorMsg: "请输入联系电话",
					regText: "联系电话"
				}],
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		onLoad() {
			this.initIndex()
		},
		methods: {
			...mapMutations(['updateUserItem']),
			async initIndex() {
				let cur_time = new Date(Math.ceil(new Date().getTime()))
				this.toDay = this.$util.formatTime(cur_time, 'YY-M-D')
				this.toDayTime = this.$util.formatTime(cur_time, 'h:m')
				let data = await this.$api.business.storeInfo()
				data.cover = data.cover && data.cover.length > 0 ? [{
					path: data.cover
				}] : []
				for (let key in this.subForm) {
					this.subForm[key] = data[key] == null ? '' : data[key]
				}
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.subForm[imgtype] = imagelist;
			},
			// 选择地区
			async toChooseLocation(e) {
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				let [, {
					address = '',
					longitude,
					latitude
				} = {}] = await uni.chooseLocation();
				if (!address) return
				this.subForm.address = address
				this.subForm.lng = longitude
				this.subForm.lat = latitude
			},
			toChangeItem(key) {
				this.subForm[key] = this.subForm[key] == 1 ? 0 : 1
			},
			toShowTime(key) {
				this.showKey = key
				this.showTime = true
			},
			onConfirm(val) {
				this.subForm[this.showKey] = val.result;
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name, 
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				console.log(message, "message");
				return message;
			},
			async submit() {
				let param = this.$util.deepCopy(this.subForm)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				param.cover = param.cover.length > 0 ? param.cover[0].path : ''
				// if (!param.start_time || !param.end_time) {
				// 	this.$util.showToast({
				// 		title: !param.start_time ? `请选择开始时间` : `请选择结束时间`
				// 	})
				// 	return
				// }
				// let start_time = `${this.toDay} ${param.start_time}`
				// let end_time = `${this.toDay} ${param.end_time}`
				// if (this.$util.DateToUnix(start_time) > this.$util.DateToUnix(end_time) - 1) {
				// 	this.$util.showToast({
				// 		title: `结束时间不能小于或等于开始时间`
				// 	})
				// 	return
				// }
				await this.$api.business.storeUpdate(param)
				this.$util.showToast({
					title: `保存成功`
				});
				setTimeout(() => {
					this.$util.back()
					this.$util.goUrl({
						url: 1,
						openType: `navigateBack`
					})
				}, 1000)

			}
		}
	}
</script>


<style lang="scss">
	.mine-store-manage {
		.item-text {
			width: 200rpx;
		}

		.item-textarea {
			width: 690rpx;
			height: 300rpx;
			overflow-y: auto;
		}

		.icon-dingwei {
			font-size: 40rpx;
		}

		.icon-switch,
		.icon-switch-on {
			font-size: 80rpx;
			line-height: 34rpx;
		}
	}
</style>
